<template>
    <div class="dahezi">
       <header class="toubu">
          <div class="_toubu">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
             <span class="iconfont icon-gouwuche"></span>
          </div>
          <section class="neirong">
              <div class="nei-left">
                  <img src="https://fuss10.elemecdn.com/5/3a/f7ef20c0a95674bc719470faf2a47jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
              </div>
              <div class="nei-right">
                  <h1>DQ冰淇淋（金街店）</h1>
                  <div class="zi">
                    <p>蜂鸟专送 <span>/</span> </p>
                    <p>23分钟送达 <span>/</span> </p>
                    <p>配送费￥5</p>
                  </div>
                  <div class="guanggao">
                     <span>公告：</span>
                     <p>用餐高峰期请提前下单，谢谢。</p>
                  </div>
                 
              </div>
          </section>
          <section class="xiamian">
              <p><span>首</span>新用户下单立减17元(不与其它活动同享)</p>
              <p>2个活动</p>
          </section>
       </header>
       <nav class="dao">
           <ul>
               <li>商品</li>
               <li>评价</li>
               <li>店铺</li>
           </ul>
       </nav>
       <section class="zhuhe">
           <ul>
               <li v-for="(v,i) in list" :key="i">{{v.name}}</li>
           </ul>
           <div class="right-he">
                <div class="he-top">
                    <p><span>热销</span>大家喜欢吃、才叫真好吃</p>
                </div>
                <div v-for='(a,b) in aa' :key='b' class="youhe">
                    <div class="ctn">
                            <div class="you-left"><img :src="a.imgUrl"></div>
                            <div class="you-right">
                                <h1>{{a.ming}}</h1>
                                <p>{{a.wenzi}}</p>
                                <p class="zuti">{{a.xiao}}</p>
                                <p class="jiage"><span class="sp1">{{a.jia}}</span><span class="iconfont icon-wuuiconxiangjifangda sp2"></span></p>
                            </div>
                    </div>
                </div>
           </div>
       </section>
       <footer class="ftr">
           <div class="ftr-top">
               满50减12
           </div>
           <div class="ftr-wei">
               <div class="wei-left">
                  <div class="wei-he">
                      <div class="hyu">
                          <p class="iconfont icon-gouwuche"></p>
                      </div>
                  </div>
                  <div class="wei-tyy">
                      <p>￥0</p>
                      <span>配送费：￥5</span>
                  </div>
               </div>
               <div class="wei-right">
                   <p>￥40起送</p>
               </div>
           </div>
       </footer>
    </div>
</template>

<script>
export default {
  name: "app",
  data: function() {
    return {
      tilie: "wert",
      list: [
        { name: "热销" },
        { name: "新品奶昔" },
        { name: "特色饮品" },
        { name: "迷你暴风雪冰淇淋" },
        { name: "暴风雪冰淇淋" },
        { name: "暴风雪填料" },
        { name: "其它" },
        { name: "新品冰卡" }
      ],

      aa: [
        {
          imgUrl:
            "https://fuss10.elemecdn.com/d/51/d18a8089bc6196447c628db852d6bjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/56/c7532813d27a44a03e6045560c495jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/d/51/d18a8089bc6196447c628db852d6bjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/c/e6/2a025fceb25dcc3431656749e6992jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/0/85/a9d46998926bd531604af58870698jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/e/c2/e163c76acc51cf0ffc7beb663eeffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
          ming: "（有料大杯）奥利奥",
          wenzi: "口味尤赞，产品以实物....",
          xiao: "月售7份",
          jia: "￥30"
        }
      ]
    };
  }
};
</script>

<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.dahezi {
  font-family: "楷体";
  .toubu {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #2199e4;
    font-family: "楷体";
    ._toubu {
      width: 95%;
      .px2rem(height,80);
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        .px2rem(font-size,60);
        color: #fff;
      }
    }
    .neirong {
      width: 100%;
      display: flex;
      .nei-left {
        width: 30%;
        .px2rem(height,180);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          .px2rem(width,140);
          .px2rem(height,140);
        }
      }
      .nei-right {
        width: 70%;
        .px2rem(height,180);
        h1 {
          .px2rem(font-size,40);
          font-weight: bold;
          color: #fff;
        }
        .zi {
          width: 100%;
          .px2rem(height,60);
          display: flex;
          p {
            .px2rem(font-size,28);
            color: #fff;
            line-height: 1.8;
          }
        }
        .guanggao {
          width: 100%;
          .px2rem(height,60);
          display: flex;
          .px2rem(font-size,28);
          color: #fff;
          span {
            .px2rem(width,85);
          }
          p {
            flex: 1;
          }
        }
      }
    }
    .xiamian {
      width: 100%;
      .px2rem(height,70);
      display: flex;
      justify-content: space-around;
      p {
        .px2rem(font-size,29);
        color: #fff;
        line-height: 1.9;
        span {
          background: #339900;
        }
      }
    }
  }
  .dao {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ccc;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    ul {
      width: 70%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      li {
        width: 15%;
        .px2rem(height,80);
        .px2rem(font-size,36);
        text-align: center;
        line-height: 2;
        font-weight: bold;
      }
      li:first-child {
        color: #0033ff;
        border-bottom: 3px solid #0033ff;
      }
    }
  }
  .zhuhe {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 23%;
      .px2rem(height,1168);
      list-style: none;
      background: #ccccff;
      .px2rem(padding-bottom,125);
      position: sticky;
      top: 20px;
      .px2rem(padding-bottom,200);
      li {
        width: 100%;
        .px2rem(height,146);
        .px2rem(font-size,38);
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #555;
      }
      li:last-child {
        border-bottom: none;
      }
    }
    .right-he {
      width: 77%;
      .px2rem(padding-bottom,170);
      .he-top {
        width: 100%;
        .px2rem(height,115);
        p {
          .px2rem(font-size,34);
          color: #555;
          line-height: 2;
          .px2rem(padding-left,20);
          box-sizing: border-box;
          span {
            .px2rem(font-size,40);
            font-weight: bold;
            color: #000;
          }
        }
      }
      .youhe {
        width: 100%;
        .px2rem(padding-bottom,30);
        .ctn {
          width: 100%;
          display: flex;
          .you-left {
            width: 30%;
            .px2rem(height,230);
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              .px2rem(width,135);
              .px2rem(height,150);
            }
          }
          .you-right {
            width: 70%;
            .px2rem(height,230);
            h1 {
              .px2rem(font-size,36);
              font-weight: bold;
            }
            p {
              line-height: 1.7;
              .px2rem(font-size,32);
              color: #555;
            }
            .zuti {
              .px2rem(font-size,36);
              color: #555;
              line-height: 1.5;
            }
            .jiage {
              display: flex;
              .sp1 {
                width: 70%;
                .px2rem(font-size,40);
                color: #cc0033;
                font-weight: bold;
                line-height: 2;
              }
              .sp2 {
                flex: 1;
                .px2rem(font-size,50);
                color: #3333ff;
              }
            }
          }
        }
      }
    }
  }
  .ftr {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 300;
    .ftr-top {
      width: 100%;
      .px2rem(height,60);
      background: #ffcc99;
      display: flex;
      justify-content: center;
      align-items: center;
      .px2rem(font-size,32);
    }
    .ftr-wei {
      width: 100%;
      display: flex;
      .wei-left {
        width: 70%;
        .px2rem(height,140);
        background: #000;
        .wei-he {
          width: 35%;
          .px2rem(height,140);
          justify-content: center;
          display: flex;
          position: relative;
          top: 0;
          .hyu {
            .px2rem(width,120);
            .px2rem(height,120);
            border: 8px solid #161823;
            border-radius: 50%;
            background: #000000;
            justify-content: center;
            align-items: center;
            display: flex;
            position: absolute;
            top: -21px;
            p {
              .px2rem(font-size,80);
              color: #666666;
            }
          }
        }
        .wei-tyy {
          width: 65%;
          .px2rem(height,140);
          display: flex;
          flex-direction: column;
          position: relative;
          .px2rem(top,-140);
          left: 35%;
          p {
            .px2rem(font-size,42);
            font-weight: bold;
            color: #fff;
            .px2rem(padding-top,35);
          }
          span {
            .px2rem(font-size,32);
            color: #fff;
            .px2rem(padding-top,12);
          }
        }
      }
      .wei-right {
        width: 30%;
        .px2rem(height,140);
        display: flex;
        justify-content: center;
        align-items: center;
        background: #161823;
        p {
          .px2rem(font-size,42);
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }
}
</style>
